// React用来编译jsx语法
import React, { Fragment, Component } from 'react';
import './style.css'
import TodoItem from './TodoItem'
import axios from 'axios'
// todolist组件继承React.Component
// var Compoent = React.Component
class TodoList extends Component {
  // 使用 props 参数来调用父类的构造函数
  constructor(props){
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.submit = this.submit.bind(this)
    this.delete = this.delete.bind(this)
  }
  // 在组件挂载之前执行
  // static getDerivedStateFromProps(props,state){
  //   return state
  //   console.log('组件before mount')
  // }
  componentWillMount(){
    console.log('componentWillMount')
  }
  // 当props、state发生变化的时候都会执行render
  // 组件挂载中
  render(){
    return (
      // jsx语法
      // fragment是占位符号但不显示
      // 需要在函数重定向this指向Todolist否则handleInputChange中的this为undefined
      // ES5 引入了 Function.prototype.bind。
      // 调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。bind绑定的参数只生效一次。
      <Fragment>
        <div>
          {/* jsx里的注释 */}
          <label htmlFor="inputt">输入内容</label>
          <input
          id="inputt" 
          value={this.state.inputValue}
          onChange={this.handleInputChange}
          /><button onClick={this.submit}>提交</button>
        </div>
        <ul ref={(ul)=>{this.ul = ul}}>
        {this.getTodoItem()}
        </ul>
      </Fragment>
    );
  }
  // 在组件挂载之后执行
  componentDidMount(){
    axios.get('/api/todolist.json').then((res)=>{
      console.log(res)
      this.setState(()=>{
        return {
          list:[...res.data.data]
        }
      })
    }).catch(()=>{
      console.log('error')
    })
    console.log('组件mounted')
  }
//  
  shouldComponentUpdate(){
    
    console.log('shouldcomponentupdate')
    return true
  }
  componentWillUpdate(){
    console.log('componentWillUpdate')
  }
  componentDidUpdate(){
    console.log('componentDidupdate')
  }
  getTodoItem(){
    return(
      this.state.list.map((item,index) => {
        // 父组件传递给子组件的函数需要进行bind(this)绑定父组件的this指向
      return <TodoItem content={item} index={index} Delete={this.delete} key={index}/>
      // <li 
      // key={index} 
      // onClick={this.delete.bind(this,index)}
      // // 文本不解析可以展示html标识
      // dangerouslySetInnerHTML={{__html:item}}
      // ></li>
      })
    )
      
  }
  handleInputChange(e){
    // react里想要修改state里的数据不能直接使用this.state.inputValue
    // 要使用this.Setstate
    // this.setState({
    //   inputValue:e.target.value
    // })
    // 新的react中this.setState接收的是一个函数
    const value = e.target.value
    // this.setState(()=> ({
    //   inputValue: value
    // }))
    this.setState(()=>{
      return {
        inputValue:value
      }
    })
  }
  submit(){
    // this.setState()里可以接收一个参数prevstate代表之前的数据
    this.setState((PrevState)=>{
      return {
        list: [...PrevState.list,PrevState.inputValue],
        inputValue:''
      }
    },()=>{console.log(this.ul.querySelectorAll('div').length)})
    // this.setState({
    //   list: [...this.state.list,this.state.inputValue],
    //   inputValue:''
    // })
    // console.log(this.state.list)
  }
  delete(index){
    let list = [...this.state.list]
    list.splice(index , 1)
    this.setState(()=>({list:list}))
    // this.setState({
    //   list:list
    // })
  }
}
export default TodoList;
